<template>
	<div class="user-index">
		<a-modal
			v-model:visible="props.visible"
			class="user-modal"
			width="80%"
			@ok="handleOk"
			height="75%"
			:footer="null"
			@cancel="cancel"
		>
			<h3>绑定设备</h3>
			<div class="content">
				<a-descriptions
					bordered
					:column="1"
					:labelStyle="{
						background: '#F3F3F3',
						border: '1px solid #CACACA',
					}"
					:contentStyle="{
						border: '1px solid #CACACA',
					}"
				>
					<a-descriptions-item label="加密锁序列号">{{
						props.data.serial
					}}</a-descriptions-item>
					<a-descriptions-item label="绑定时间">{{
						getDate()
					}}</a-descriptions-item>
					<a-descriptions-item label="设备名称">{{
						props.data.hostname
					}}</a-descriptions-item>
					<a-descriptions-item label="电脑序列号">{{
						props.data.machineId
					}}</a-descriptions-item>
				</a-descriptions>
			</div>
			<div class="footer">
				<div class="left">
					<span class="desc"><b>*</b>设备信息为当前电脑设备信息</span>
					<!-- <span class="info"
						>请仔细核对您当前要绑定的设备信息，一个加密锁只能绑定一台设备</span
					> -->
				</div>
				<div class="btn-list">
					<a-button @click="cancel">取消</a-button>
					<a-button :loading="loading" type="primary" @click="bind"
						>绑定</a-button
					>
				</div>
			</div>
		</a-modal>
	</div>
</template>

<script setup>
import { ref, defineProps } from 'vue';
import { requestHttp } from '@/api/main.js';
import { message } from 'ant-design-vue';

const props = defineProps(['visible', 'data']);
const emits = defineEmits(['update:visible']);
let loading = ref(false);
console.log(props.data);
const handleOk = () => {};
const bind = () => {
	loading.value = true;
	requestHttp('controller.manager.bindMachine', {
		serial: props.data.serial,
	}).then((res) => {
		//server 正常
		loading.value = false;
		if (res.status != 200) {
			message.error(res.msg);
		} else {
			emits('update:visible', false);
		}
	});
};
const getDate = () => {
	var date = new Date();
	let formatTime =
		date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
	return formatTime;
};
const cancel = () => {
	emits('update:visible', false);
};
</script>

<style lang="scss" scoped>
h3 {
	font-size: 21px;
	color: #287cfa;
	text-align: center;
}
:deep(.ant-descriptions-row) {
	height: 44px;
	line-height: 44px;
}
:deep(.ant-descriptions-row .ant-descriptions-item-label) {
	text-align: right;
	padding: 0 24px;
	width: 30%;
}
:deep(.ant-descriptions-row .ant-descriptions-item-content) {
	text-align: center;
	padding: 0 24px;
}
.content {
	height: 300px;
	overflow-y: auto;
	.title {
		display: block;
		font-size: 16px;
		color: #333333;
	}
	.desc {
		display: block;
		font-size: 14px;
		color: #2a2a2a;
	}
}
.footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 30px;
	.left {
		span {
			display: block;
		}
		.desc {
			font-size: 12px;
			color: #2a2a2a;
			b {
				color: #de3f3f;
			}
		}
		.info {
			font-size: 12px;
			color: #de3f3f;
			margin: 5px 0 0 6px;
		}
	}
	.btn-list {
		button + button {
			margin-left: 10px;
		}
	}
}
</style>
